<template>
  <div class="profile">
    <div class="header">
      <img src="https://api-haoke-web.itheima.net/img/profile/bg.png" alt="" />
      <div class="header_box">
        <div class="box_header">
          <img
            src="https://api-haoke-web.itheima.net/img/profile/avatar.png"
            alt=""
          />
        </div>
        <div class="box_main" v-if="show">
          <p>admin</p>
          <button @click="backMy">退出</button>
          <p>编辑个人资料</p>
        </div>
        <div class="box_main" v-else>
          <p>游客</p>
          <button @click="goLogin">去登录</button>
        </div>
      </div>
      <div v-show="flag" class="wrap">
        <div class="busi">
          <h6 class="h6">提示</h6>
          <div class="t">是否确认退出</div>
          <div class="button">
            <button @click="qu" class="left-btn">取消</button>
            <hr />
            <button @click="que" class="right-btn">确定</button>
          </div>
        </div>
      </div>
    </div>
    <div class="am-grid">
      <p>
        <span @click="$router.push('/rent')"
          ><i class="icon iconfont icon-shouye1"></i>我的出租</span
        >
      </p>
      <p>
        <span><i class="icon iconfont icon-shijian"></i>看房记录</span>
      </p>
      <p>
        <span  @click="$router.push('/rent/add')"><i class="icon iconfont icon-qiabao"></i>成为房主</span>
      </p>
      <p>
        <span @click="$router.push('/personal')"><i class="icon iconfont icon-wode"></i>个人资料</span>
      </p>
      <p>
        <span><i class="icon iconfont icon-kefu"></i>联系我们</span>
      </p>
      <p></p>
    </div>
    <div class="di">
      <img
        src="https://api-haoke-web.itheima.net/img/profile/join.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      flag: false,
    };
  },
  methods: {
    backMy() {
      this.flag = true;
      // this.show = false;
    },
    goLogin() {
      this.$router.push("/login");
      this.show = true;
    },
    qu() {
      this.flag = false;
    },
    que() {
      window.localStorage.setItem("token", "");
      window.localStorage.setItem("city", "");
      window.localStorage.setItem("cityId", "");
      this.flag = false;
      this.show = false;
    },
  },
  created() {
    if (!window.localStorage.getItem("token")) {
      // 无token
      this.show = false;
    } else {
      this.show = true;
    }
  },
};
</script>

<style scoped>
.profile {
  width: 100%;
  height: 100%;
}
.am-grid {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.di {
  width: 90%;
  height: 90px;
  margin: 0 auto;
}
.di img {
  width: 100%;
}
.am-grid p {
  width: 33%;
  height: 100px;
  text-align: center;
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
}
.am-grid p i {
  display: block;
  font-size: 20px;
}
.header {
  min-height: 300px;
  position: relative;
}
.header img {
  width: 100%;
}
.box_main {
  padding-top: 15px;
}
.box_main p:first-child {
  margin-top: -30px;
  margin-bottom: 10px;
}
.box_main p:last-child {
  color: #999;
  font-size: 12px;
  margin-top: 20px;
}
.box_main button {
  outline: none;
  border: 0;
  border-radius: 30px;
  color: #fff;
  padding: 2px 15px;
  background: #21b97a;
  font-size: 12px;
}
.wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.busi {
  width: 270px;
  height: 141px;
  background: #fff;
  border-radius: 10px;
  margin: 70% auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.h6 {
  font-size: 20px;
  font-weight: 500;
}
.t {
  font-size: 15px;
}
.button {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.button button {
  width: 134px;
  height: 50px;
  border: 0;
  background: #fff;
  font-size: 15px;
  border-top: 1px solid #000;
}
.left-btn {
  border-radius: 0 0 0 10px;
}
.right-btn {
  border-radius: 0 0 10px 0;
  color: cornflowerblue;
}
.box_header {
  position: relative;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  border: 5px solid #f5f5f5;
  display: inline-block;
  box-shadow: 0 2px 2px #bdbdbd;
}
.box_header img {
  width: 100%;
  border-radius: 50%;
}
.header .header_box {
  position: absolute;
  background: #fff;
  width: 85%;
  height: 55%;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  box-shadow: 0 0 10px 3px #ddd;
  margin: 50px auto 0;
  padding: 0 20px;
  text-align: center;
  font-size: 13px;
}
</style>